<html>

<head>
    <title>打地鼠</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <audio src="audio/music.mp3" autoplay loop></audio>
    <audio src="dazhong.wav" id="bit"></audio>
    <!--table>tr*4>td*4>image[src=image/mouse.png]-->

    <div id="score">
        得分：0
    </div>
    <table>
        <tr>
            <td>
                <image src="image/mouse.png"></image>
            </td>
            <td>
                <image src="image/mouse.png"></image>
            </td>
            <td>
                <image src="image/mouse.png"></image>
            </td>
            <td>
                <image src="image/mouse.png"></image>
            </td>
        </tr>
        <tr>
            <td>
                <image src="image/mouse.png"></image>
            </td>
            <td>
                <image src="image/mouse.png"></image>
            </td>
            <td>
                <image src="image/mouse.png"></image>
            </td>
            <td>
                <image src="image/mouse.png"></image>
            </td>
        </tr>
        <tr>
            <td>
                <image src="image/mouse.png"></image>
            </td>
            <td>
                <image src="image/mouse.png"></image>
            </td>
            <td>
                <image src="image/mouse.png"></image>
            </td>
            <td>
                <image src="image/mouse.png"></image>
            </td>
        </tr>
        <tr>
            <td>
                <image src="image/mouse.png"></image>
            </td>
            <td>
                <image src="image/mouse.png"></image>
            </td>
            <td>
                <image src="image/mouse.png"></image>
            </td>
            <td>
                <image src="image/mouse.png"></image>
            </td>
        </tr>
    </table>
</body>


<script>
    //获取所有的img标签
    var mouses = document.getElementsByTagName("img");
    //定义函数
    function showOne() {
        //生成随机数 0-1
        var n = Math.random();
        n = n * 16;
        //向下取整（取不大于本身的最大的整数）
        n = Math.floor(n);
        mouses[n].classList.add("show");

        function hide() {
            mouses[n].classList.remove("show");
        }
        setTimeout(hide, 2000);
    }

    function showSome() {
        showOne();
        showOne();
        showOne();
    }
    setInterval(showSome, 1000);

    var palyer = document.getElementById("bit");
    var s = 0;
    var board = document.getElementById("score");


     function md(e) {
            e.target.classList.remove("show");
            s = s + 10;           
           board.textContent = "得分：" + s;
            
        }

    for (var i = 0; i < mouses.length; i++) {

        mouses[i].onclick = md;
    }
    document.body.onmousedown = function (e) {
        document.body.style.cursor = "url(image/cursor-down.png),auto";
    }

    document.body.onmouseup = function (e) {
        document.body.style.cursor = "url(image/cursor.png),auto";
    }

</script>

</html>